<template>
  <div style="width: 100%">
    <a-card class="margin-bottom-sm eip-admin-card-small">
      <eip-search
        ref="search"
        :option="table.search.option"
        @search="tableSearch"
        @advanced="tableAdvanced"
      ></eip-search>
    </a-card>

    <a-card class="eip-admin-card-small">
      <vxe-toolbar ref="toolbar" custom print :refresh="{ query: tableInit }">
        <template v-slot:buttons>
          <a-space>
            <a-button type="primary"> <a-icon type="edit" />查看</a-button>
            <a-button type="danger"><a-icon type="delete" />删除</a-button>
          </a-space>
        </template>
      </vxe-toolbar>
      <vxe-table
        ref="table"
        border
        resizable
        size="small"
        :seq-config="{
          startIndex: (table.page.param.current - 1) * table.page.param.size,
        }"
        :checkbox-config="{ trigger: 'row', highlight: true, range: true }"
        :print-config="{}"
        :loading="table.loading"
        :height="table.height"
        :data="table.data"
        :toolbar-config="table.toolbar"
        :tooltip-config="{ showAll: true, contentMethod: tableTooltip }"
        @cell-dblclick="showDetail"
      >
        <vxe-table-column
          type="checkbox"
          width="60"
          align="center"
        ></vxe-table-column>
        <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
        <vxe-table-column field="createTime" title="登录时间" width="150">
        </vxe-table-column>
        <vxe-table-column
          field="createUserCode"
          title="登录名"
          width="150"
          showOverflow="ellipsis"
        >
        </vxe-table-column>
        <vxe-table-column
          field="createUserName"
          title="名称"
          width="150"
          showOverflow="ellipsis"
        >
        </vxe-table-column>
        <vxe-table-column field="remoteIp" title="客户端IP" width="120">
        </vxe-table-column>
        <vxe-table-column field="remoteIpAddress" title="归属地址" width="120">
        </vxe-table-column>
        <vxe-table-column field="loginOutTime" title="退出时间" width="150">
        </vxe-table-column>
        <vxe-table-column
          field="standingTime"
          title="停留时间(小时)"
          width="200"
        >
        </vxe-table-column>
        <vxe-table-column
          field="navigator"
          title="浏览器"
          showOverflow="ellipsis"
        >
        </vxe-table-column>
      </vxe-table>
      <a-pagination
        class="padding-top-sm float-right"
        v-model="table.page.param.current"
        size="small"
        show-size-changer
        show-quick-jumper
        :page-size-options="['20', '50', '100', '150', '200']"
        :show-total="(total) => `共 ${total} 条`"
        :page-size="table.page.param.size"
        :total="table.page.total"
        @change="tableInit"
        @showSizeChange="tableSizeChange"
      >
      </a-pagination>
    </a-card>
    <a-card
      class="eip-admin-card-small"
      style="height: 290px; margin-top: 10px"
    >
      <div id="system-loginlog-list-analysis" style="height: 260px"></div>
    </a-card>
    <login-detail
      :data="detail.data"
      :visible="detail.visible"
      @close="closeDetail"
    ></login-detail>
  </div>
</template>

<script>
import moment from "moment";
import { query, analysis } from "@/services/system/log/login";
import loginDetail from "./login-detail";
import eipSearch from "@/pages/common/usercontrol/eip-search";
import * as echarts from "echarts";
export default {
  data() {
    return {
      table: {
        columns: [],
        toolbar: {
          export: true,
          print: true,
          zoom: true,
          custom: true,
          slots: {
            buttons: "buttons",
          },
        },
        page: {
          param: {
            current: 1,
            size: this.$page.size,
            sord: "desc",
            sidx: "",
            filters: "",
          },
          total: 0,
          sizeOptions: this.$page.sizeOptions,
        },
        loading: true,
        data: [],
        height: window.innerHeight - 642,

        search: {
          option: {
            num: 3,
            config: [
              {
                field: "CreateUserCode",
                op: "cn",
                placeholder: "请输入登录名",
                title: "登录名",
                value: null,
                type: "text",
              },
              {
                field: "CreateUserName",
                op: "cn",
                placeholder: "请输入名称",
                title: "名称",
                value: null,
                type: "text",
              },

              {
                field: "RemoteIpAddress",
                op: "cn",
                placeholder: "请输入归属地址",
                title: "归属地址",
                value: null,
                type: "text",
              },
              {
                field: "LoginOutTime",
                op: "date",
                placeholder: "请输入退出时间",
                title: "退出时间",
                type: "datetime",
                value: null,
                format: "yyyy-MM-DD",
              },
              {
                field: "CreateTime",
                op: "daterange",
                placeholder: "请选择登录时间",
                title: "登录时间",
                type: "daterange",
                value: [
                  moment()
                    .subtract(1, "months")
                    .format("YYYY-MM-DD HH:mm:ss"),
                  moment().format("YYYY-MM-DD HH:mm:ss"),
                ],
                showTime: { format: "HH:mm:ss" }, //是否显示时间
                format: "YYYY-MM-DD HH:mm:ss",
              },
            ],
          },
        },
      },
      detail: {
        data: {},
        visible: false,
      },

      analysis: {
        echarts: {},
        option: {
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["登录次数"],
          },
          grid: {
            x: 50,
            y: 30,
            x2: 50,
            y2: 64,
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          dataZoom: [
            {
              type: "slider",
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 9999, //初始化滚动条
            },
          ],
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [],
          },
          yAxis: {
            type: "value",
          },
          series: {
            data: [],
            name: "登录次数",
            type: "line",
            areaStyle: {},
          },
        },
      },
    };
  },
  components: {
    loginDetail,
    eipSearch,
  },
  mounted() {
    this.tableInit();
    this.analysisInit();
  },
  methods: {
    //登录日志
    analysisInit() {
      let _this = this;
      this.analysis.echarts = echarts.init(
        document.getElementById("system-loginlog-list-analysis")
      );
      this.table.page.param.filters = this.$refs.search.getFilters();
      analysis(_this.table.page.param).then(function(result) {
        _this.analysis.option.xAxis.data = result.analysis.xdata;
        _this.analysis.option.series.data = result.analysis.ydata;
        _this.analysis.echarts.setOption(_this.analysis.option);
      });
    },

    //悬浮显示
    tableTooltip({ type, column, row, items, _columnIndex }) {
      const { property } = column;
      if (row) {
        return row[property];
      }
      return null;
    },

    /**
     * 列表查询
     */
    tableSearch() {
      this.table.page.param.current = 1;
      this.tableInit();
      this.analysisInit();
    },

    //初始化列表数据
    tableInit() {
      let _this = this;
      this.table.loading = true;
      this.table.page.param.filters = this.$refs.search.getFilters();
      query(_this.table.page.param).then(function(result) {
        _this.table.data = result.data;
        _this.table.loading = false;
        _this.table.page.total = result.count;
      });
    },

    /**
     *数量改变
     */
    tableSizeChange(current, pageSize) {
      this.table.page.param.size = pageSize;
      this.tableInit();
    },

    //详情
    showDetail({
      row,
      rowIndex,
      $rowIndex,
      column,
      columnIndex,
      $columnIndex,
      $event,
    }) {
      this.detail.data = row;
      this.detail.visible = true;
    },

    //关闭详情
    closeDetail() {
      this.detail.visible = false;
    },

    /**
     * 调整,收起展开高度
     */
    tableAdvanced(advanced) {
      this.table.height = window.innerHeight - (advanced ? 642 : 602);
    },
  },
};
</script>

<style lang="less" scoped></style>
